<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font-size: 16px;
				font-family: "微软雅黑";
				text-decoration: none;
				/* 无序列表：有样式---“去掉一个样式：列表项 */
				list-style-type: none;
				/* 无序列表：有样式-- 推荐用 【理解：简写】
				 去全部样式：list-style-tyle 去列表项样式
				            list-style-position 去列表项标记位置样式
				            list-style-image   去列表项图片标记样式
				 */
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			/* 左栏效果
			   1.左栏空间区域  235*450 背景颜色
			   2.左栏区域内容【li】 加权 235*50 相对定位--挂靠点【固定位置】
			   3.给每个区域内容【li】加鼠标移动上去改背景颜色
			   4.左栏弹出框：400*450 加边框 绝对定位-微调
			 */
			aside{
				width: 235px;
				height: 450px;
				border: 1px solid gray;
				background-color: skyblue;
				border-radius: 10%;
				margin: 20px 50px;
			}
			ul.sidebar li{
				width: 235px;
				height: 50px;
				position: relative;
				text-align: center;
				left: ;
				top: ;
				}
			ul.sidebar li:hover{
				color: #ff0000;
				
			}	
			ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid black;
				border-radius: 10%;
				position: absolute;
				left: 287px;
				/* 显示与隐藏  JavaScript【JQuery框架】 */
				display: none;
				}
		</style>
	</head>
	<body>
		<!-- html结构  结构化标签【语义化标签】
		 aside元素  针对：左栏，广告，弹出效果……有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐，定义起名 冗余】
		 -->
		 <aside>
			 <ul class="sidebar">
				 <!-- 弹出框-->
				 <div class="out"></div>
			 	<li>手机</li>
			 	<li>电脑</li>
			 	<li>男装</li>
			 	<li>女装</li>
			 	<li>美妆</li>
			 	<li>数码</li>
			 	<li>视频</li>
			 	<li>饮品</li>
			 	<li>房产</li>
			 </ul>
			  </aside>
	</body>
</html>